<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../../css/swiper.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../../css/common.css" />
<style>
	.swiper-pagination {
		position: absolute;
		left: auto;
		right: 0.75rem;
		width: auto;
		color: #FFF;
		font-size: 0.7rem;
	}
	.postDetailBox {
		padding: 0 0.5rem 0.75rem;
		background: #FFF;
	}
	.postDetailBox .authorInfo {
		margin-bottom: 1rem;
		height: 3rem;
	}
	.postDetailBox .authorInfo .avatar {
		width: 1.6rem;
	}
	.postDetailBox .authorInfo .name {
		color: #000;
		font-size: 0.7rem;
		padding: 0 0.5rem;
	}
	.postTtl {
		color: #533A33;
		margin-bottom: 1rem;
	}
	.postDetail {
		margin-bottom: 0.5rem;
		color: #333;
		font-size: 0.7rem;
	}
	.postDetail p {
		color: #333;
		font-size: 0.7rem;
		margin-bottom: 0.25rem;
	}
	.postDate {
		font-size: 0.5rem;
		color: #adadad;
	}
	.topShadow {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 70px;
		background: linear-gradient(rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
		z-index: 5;
	}
</style>
</head>

<body>
<div id="app">
	<div class="pageCover show"></div>
	<div class="relative">
		<div class="topShadow"></div>
		<div class="swiper-container postSlider">
			<div class="swiper-wrapper">
				<div class="swiper-slide overflow" v-for="slide in postInfo.article_label">
					<div class="photo"><img :src="slide.image" width="100%" alt=""></div>
					<div class="postTag" :class="{'fan' : tag.isFan}" v-for="(tag,tagIndex) in slide.labelData" :data-ind="tagIndex" :data-godId="tag.godId" :style="{left: tag.left,top: tag.top}" tapmode onclick="openProduct(this)">
						<div class="dotBox">
							<div class="dot ani"></div>
							<div class="dot"></div>
						</div>
						<div class="tagName">{{tag.godTtl}}</div>
					</div>
				</div>
			</div>
			<div class="swiper-pagination"></div>
		</div>
	</div>
	<div class="postDetailBox">
		<div class="authorInfo aui-flex-col aui-flex-middle aui-border-b">
			<div><div class="avatar"><img :src="postInfo.user_avatar" alt=""></div></div>
			<div class="name aui-ellipsis-1 flex-auto">{{postInfo.user_nickname}}</div>
			<div class="comFollowBtn" v-if="postInfo.article_userid != userInfo.userid" :class="{'on': postInfo.is_attention == 1 }" tapmode onClick="togFollow(this);"></div>
		</div>
		<div class="postDetail" v-html="line2br(postInfo.article_content)"></div>
		<div class="postDate" v-text="Date.parse(postInfo.article_addtime).toString('MM-dd')"></div>
	</div>
	<div class="bg-f5" style="height: 0.25rem;"></div>
	<div class="postEvaBox">
		<div class="comFlexItem right-arrow aui-border-b aui-margin-b-15">
			<div class="aui-font-size-16">文章评论</div>
			<div class="aui-px-15 aui-font-size-12" tapmode onClick="openAllEva();">共{{ postInfo.article_comment_count }}条评论</div>
		</div>
		<div class="myEva aui-flex-col aui-flex-middle">
			<div class="avatar"><img :src="userInfo.user_avatar" alt=""></div>
			<div class="flex-auto evaInput" tapmode onclick="openAllEva();">想勾搭，先评论</div>
		</div>
		<div class="postEvaList">
			<div class="item" v-for="(comment,commentIndex) in postInfo.comment" v-if="commentIndex < 5">
				<div class="avatar"><img :src="comment.user_avatar" alt=""></div>
				<div class="aui-flex-col aui-flex-middle aui-flex-between">
					<div class="evaName" v-text="comment.user_nickname"></div>
					<div class="likeBtn" :class="{'on': comment.is_like == 1}" v-tap="[togEvaLike,comment]">{{ comment.comment_like_count }}</div>
				</div>
				<div class="evaDate">{{ Date.parse(comment.comment_addtime).toString('MM-dd HH:mm') }}</div>
				<div class="evaDetail" v-text="comment.comment_content" v-tap="[openReply,comment.comment_id]"></div>
				<div class="replyBox" v-if="comment.reply.length">
					<div class="replyItem" v-for="(reply,replyIndex) in comment.reply" v-if="replyIndex < 3"><span class="replyName">{{reply.user_nickname}}{{ reply.comment_userid == postInfo.article_userid ? '(作者)' : '' }}:</span>{{reply.comment_content}}</div>
					<div class="moreReply"><span class="right-arrow" v-tap="[openReply,comment.comment_id]">共{{ comment.reply.length }}条回复</span></div>
				</div>
			</div>
		</div>
		<div class="aui-border-t btmInfoBtn" tapmode onClick="openAllEva();">查看全部{{ postInfo.article_comment_count }}条评论</div>
	</div>
</div>
</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/vue-tap.js"></script>
<script type="text/javascript" src="../../script/date.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript">
var topSwiper;
var vm;
var vuedata = {
	userId: '',
	userInfo: {},
	postId: '',
	postInfo: {}
};
vm = new Vue({
	el: '#app',
	data: vuedata,
	methods: {
		//评论点赞
		togEvaLike: function(obj){
			api.ajax({
				url: BASE_URL + 'App/Article/commentLike',
				method: 'post',
				data: {
					values: {
						userid: vuedata.userId,
						comment_id: obj.comment_id,
					}
				}
			},function(ret,err){
				if (ret && ret.code == 1) {
					if(ret.msg == '取消成功'){
						obj.is_like = -1;
						obj.comment_like_count--;
					}else{
						obj.is_like = 1;
						obj.comment_like_count++;
					}
					toast(ret.msg);
				} else {
					toast('操作失败');
				};
			});
		},
		//打开评论详情
		openReply: function(id){
			api.openWin({
				name: 'post_eva_reply_win',
				url: 'post_eva_reply_win.html',
				pageParam: {
					article_id: vuedata.postInfo.article_id,
					article_userid: vuedata.postInfo.article_userid,
					comment_id: id
				}
			});
		}
	}
});
apiready = function() {
	api.parseTapmode();
	vuedata.postId = api.pageParam.id;
	vuedata.userId = getUserId();
	vuedata.userInfo = getUserinfo();
	getData();

	//监听发表评论后刷新页面
	api.addEventListener({
		name: 'evaSendEvent'
	}, function(ret, err){
		getData();
	});
	//监听发表评论后刷新页面
	api.addEventListener({
		name: 'replySendEvent'
	}, function(ret, err){
		getData();
	});
	//监听点赞后更新
	api.addEventListener({
		name: 'postLikeEvent'
	}, function(ret, err){
		getData();
	});
};

function getData(){
	api.ajax({
		url: BASE_URL + 'App/Article/articleDetail',
		method: 'post',
		data: {
			values: {
				userid: vuedata.userId,
				article_id: vuedata.postId
			}
		}
	},function(ret,err){
		if (ret && ret.code == 1) {
			vuedata.postInfo = ret.data;
			//发送文章详情到win页面
			api.sendEvent({
				name: 'postDetailEvent',
				extra: {
					info: ret.data
				}
			});
			setTimeout(function(){
				api.parseTapmode();
				sliderInit();
			},50);
		}
		setTimeout(function(){
			$$('.pageCover').removeClass('show');
		},100);
	});
}
//轮播
function sliderInit(){
	topSwiper = new Swiper('.postSlider',{
		speed: 600,
		autoplay: false,
		speed: 600,
		autoHeight: true,
		effect : 'fade',
		fadeEffect: {
			crossFade: true,
		},
		pagination: {
			el: '.swiper-pagination',
			type: 'fraction'
		},
	});
}
//打开商品详情
function openProduct(el){
	var _this = $$(el);
	var id = _this.data('godId');
	openProductDetail(id);
}

//关注作者
function togFollow(){
	api.ajax({
		url: BASE_URL + 'App/Article/userFollow',
		method: 'post',
		data: {
			values: {
				userid: vuedata.userId,
				concerned_userid: vuedata.postInfo.article_userid
			}
		}
	},function(ret,err){
		if (ret && ret.code == 1) {
			if(ret.msg == '取消成功'){
				vuedata.postInfo.is_attention = -1;
			}else{
				vuedata.postInfo.is_attention = 1;
			}
			toast(ret.msg);
		} else {
			toast('操作失败');
		};
	});
}

//打开全部评论
function openAllEva(){
	api.openWin({
		name: 'post_eva_list_win',
		url: 'post_eva_list_win.html',
		pageParam: {
			article_id: vuedata.postInfo.article_id
		}
	});
}
//打开评论footer
function openChatFooter(){
	api.openFrame({
		name: 'chat_footer',
		url: 'widget://html/chat_footer.html',
		rect: {
			x: 0,
			y: api.winHeight - 50,
			w: 'auto',
			h: 50
		},
		bounces: false,
		pageParam: {
			article_id: vuedata.postInfo.article_id,
			article_userid: vuedata.postInfo.article_userid,
			autoFocus: true,
			autoHide: true,
		}
	});
}
</script>
</html>
